<template>
  <div>
    <van-nav-bar
      fixed
      title="搜索结果"
      left-arrow
      class=""
      @click-left="$utils.back($route.path)"
    />
    <div class="has-top " style="height:100vh">
      <!-- 店铺基本信息栏 -->
      <div class="info-box">
        <img-box class="img-box" :img-url="info.Logo" />
        <div class="info-bg plr-25">
          <p class="color-white fs-32 fw-b pt-70 flex-s-c">
            <span>{{ info.PurchaseMemberName }}</span>
            <span class="all-product-btn" @click="goStoreName(purchaseMemberId)">全部商品</span>
          </p>
          <p class="color-white text-show-line-2">{{ info.Address }}</p>
        </div>
      </div>

      <!-- 商品分类及列表栏 -->
      <div class="flex list-content mt-30">
        <!-- 商品列表 -->
        <div id="scrollBox" ref="scrollBox" class=" bg-f9 flex-1 scoll-y">
          <productList :product-list="productList" list-type="purchase" @goDetailPage="goDetailPage" />
          <no-data v-if="productList.length === 0" />
          <p v-if="end===true&&productList.length!==0" class="tac fs-24 ptb-40 color-gray-light">无更多数据</p>

        </div>
      </div>
    </div>

    <!-- 商品详情弹窗 -->
    <van-popup v-model="detailShow" position="bottom" class="full-width full-height detail-page">
      <OrderDetail :product-id="productId" @back="detailShow = false" @gotoSupplier="gotoSupplier" />
    </van-popup>
  </div>
</template>

<script>
import noData from 'components/noData'
import productList from 'components/productList'
import OrderDetail from 'components/purchase/orderDetail'
import imgBox from 'components/imgBox'
import { GetPurchaseProductListPage, GetSupplierPage } from 'api/purchase'
export default {
  components: {
    noData,
    productList,
    OrderDetail,
    imgBox
  },
  data() {
    return {

      // 商品列表
      productList: [],

      info: {},
      purchaseMemberId: 0,

      // 商品详情
      productId: 0,
      detailShow: false,

      detailIndex: -1,
      SpecIndex: -1,

      // 滚动状态
      totalAmout: 0,
      scollRequest: true,
      scollTop: 0,
      end: false,

      // 请求参数(按商品展示)
      requestData: {
        PageIndex: 1,
        PageSize: 10,
        type: 0
      }

    }
  },
  created() {
    const _obj = JSON.parse(this.$route.params.obj)
    this.requestData.type = _obj.type
    this.requestData.typePath = _obj.typePath
    this.purchaseMemberId = _obj.purchaseMemberId
    this.GetSupplierPage(_obj.purchaseMemberId)
    this.GetPurchaseProductListPage()
  },
  mounted() {
    this.$nextTick(function() {
      document.querySelector('#scrollBox').addEventListener('scroll', this.onScroll)
    })
  },
  methods: {

    // 打开商品详情弹窗
    goDetailPage(item, index) {
      this.productId = item.ProductId
      this.detailShow = true
    },
    gotoSupplier(id) {
      this.$router.push('/purchase/StoreHome/' + id)
    },
    goStoreName(id) {
      this.$router.push('/purchase/StoreHome/' + id)
    },
    showSpec(item, index) {
      console.log(item)
      this.SpecIndex = index
      this.optPopup.type = 'attr'
      this.optPopup.data = item
      this.optPopup.show = true
    },
    updateCart(item) {
      const _obj = {}
      _obj.ProductId = item.ID
      _obj.Amount = item.Amount
      _obj.SkuId = item.ProductSkuList[0].ID
      this.cartRequestList = []
      this.cartRequestList.push(_obj)
      this.AddOrUpdateAmount()
    },
    changeAddress(address) {
      console.log(999)
      this.detailData.UserAddress = address
      // this.$forceUpdate()
    },

    // 规格弹窗组件方法
    addCart(arr) {
      console.log(arr)
      this.cartRequestList = arr
      if (this.cartRequestList.length <= 0) {
        this.$toast.fail('请选择商品')
        return
      }
      this.AddOrUpdateAmount()
    },
    closePopup() {
      this.optPopup.show = false
    },
    searchAdress() {},

    // 详情弹窗方法
    clickLeft() {
      this.detailShow = false
    },
    // 滚动事件触发下拉加载
    onScroll() {
      const _this = this
      if (_this.scollRequest === true) {
        if (this.$utils.getScrollHeight('scrollBox') - this.$utils.getClientHeight('scrollBox') - this.$utils.getScrollTop('scrollBox') <= 5) {
          _this.scollRequest = false
          // alert('触发！！！')
          console.log('加载')
          _this.scollTop = this.$utils.getScrollTop('scrollBox')
          if (_this.requestData.PageIndex < _this.totalAmout) {
            _this.requestData.PageIndex++
            _this.GetPurchaseProductListPage()
          } else {
            console.log('end')
            _this.end = true
          }
          // }
        }
      }
    },

    // 获取商品列表
    GetPurchaseProductListPage() {
      const _this = this
      GetPurchaseProductListPage(_this.requestData).then(res => {
        if (res) {
          if (res.Data && res.Data.length && res.Data.length > 0) {
            res.Data.forEach(item => {
              this.productList.push(item)
            })
            _this.totalAmout = res.TotalAmout
            _this.scollRequest = true
            if (_this.scollTop > 0) {
              _this.$refs.scrollBox.scrollTo(0, _this.scollTop)
            }
          }
        }
      })
    },
    // 获取供应商信息
    GetSupplierPage(id) {
      GetSupplierPage({ id }).then(res => {
        if (res) {
          this.info = res.Data
        }
      })
    }

  }
}
</script>
<style lang="scss" scoped>
.info-box{
  height: 192px;
  width: 100%;
  position: relative;
  .img-box{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  .info-bg{
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    .all-product-btn{
      font-size: 26px;
      font-weight: 500;
      line-height: 50px;
      border-radius: 25px;
      padding: 0 24px;
      border: 1px solid $colorF;
    }
  }
}
.tab-item{
  margin: 0 auto;
  position: relative;
}
.tab-item-scan{
  @include bg-primary;
  color:$colorF;
  padding: 0 25px;
  border-radius: 30px;
}
.tab-active:after{
  content:'';
  position: absolute;
  width: calc(100% - 4px);
  height: 4px;
  @include bg-primary;
  bottom: -10px;
  left: 2px;
  border-radius: 2px;
}

// 以上修整完成
.list-content{
  height: calc(100% - 216px);
}

.scoll-y {
  overflow-y: scroll;
}
.classifyItem {
  width: 200px;
}
.activeIndex {
  background: $colorF;
  position: relative;
  &:before {
    content: '';
    height: calc(100% - 40px);
    width: 8px;
    @include bg-primary();
    position: absolute;
    top: 20px;
    left: 0;
    border-radius: 0 8px 8px 0;
  }
}
.van-popup{
  background: transparent;
}
.detail-page{
  background: $colorF5;
}
</style>
